
<template>
  <div class="map-container">
    <div class="map-info">
      <span>Center: {{ center }}</span>
      <span>Zoom: {{ zoom }}</span>
      <span>Bounds: {{ bounds }}</span>
    </div>
    <l-map
      ref="map"
      class="map"
      :zoom="zoom"
      :maxZoom="maxZoom"
      :center="center"
      @update:zoom="zoomUpdated"
      @update:center="centerUpdated"
      @update:bounds="boundsUpdated"
    >
      <!-- 瓦片图 -->
      <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>

      <!-- 标点1 tooltip -->
      <l-marker :lat-lng="markerOne" :icon="markerOptions">
        <l-tooltip>Hello!</l-tooltip>
      </l-marker>

      <!-- 标点2 popup -->
      <l-marker :lat-lng="markerTwo">
        <!-- 通过:options可以传递leaflet的原始参数 -->
        <l-popup :options="popupOptions">
          <el-table :data="tableData" style="width: 600px">
            <el-table-column prop="date" label="日期" width="180"></el-table-column>
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
          </el-table>
        </l-popup>
      </l-marker>

      <!-- 几何相关的组件，必须的属性通过prop形式传递。在leaflet中共同的原始属性都通过:l-style传递 -->
      <!-- 线 -->
      <l-polyline :lat-lngs="polyline.latlngs" :l-style="polyline.style" @click="lineClick">
        <l-tooltip :options="{sticky:true}">Hello!</l-tooltip>
      </l-polyline>
      <!-- 矩形 -->
      <l-rectangle :bounds="rectangle.bounds" :l-style="rectangle.style">
        <l-tooltip>Hello rectangle!</l-tooltip>
      </l-rectangle>
      <!-- 几何 -->
      <l-polygon :lat-lngs="polygon.latlngs" :l-style="polygon.style">
        <l-tooltip>Hello polygon!</l-tooltip>
      </l-polygon>
      <!-- 圆 -->
      <l-circle :lat-lng="circle.center" :radius="circle.radius" :l-style="circle.style"/>
     
      <map-contextmenu :menu-items="menuItems" @click="menuClick" menu-width="120px"></map-contextmenu>
    </l-map>
  </div>
</template>

<script>
import {
  LMap,
  LTileLayer,
  LMarker,
  LTooltip,
  LPopup,
  LPolyline,
  LRectangle,
  LPolygon,
  LCircle
} from 'vue2-leaflet'
import L from 'leaflet'
import MapContextmenu from './components/MapContextmenu'


export default {
  name: 'MapBase',
  data() {
    return {
      url:
        'https://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw',
      attribution: '&copy; Lenovo contributors',
      zoom: 13,
      maxZoom: 16,
      center: [51.5, -0.09],
      // 初始化可视范围，如果设置center,此配置会忽略
      bounds: null,
      circle: {
        center: [51.508, -0.11],
        radius: 500,
        style: { color: 'red' }
      },
      markerOne: [51.508, -0.15],
      markerTwo: [51.508, -0.08],
      markerOptions:L.divIcon({
            html: "●",
            className: 'my-div-icon',
        }),
      // leaflet原始属性，通过:options传递
      popupOptions: {
        maxWidth: 800
      },
      polyline: {
        latlngs: [[51.519, -0.18], [51.523, -0.16], [51.51, -0.17], [51.513, -0.172], [51.515, -0.177]],
        style: { color: 'blue', weight: 5 }
      },
      rectangle: {
        bounds: [[51.501, -0.11], [51.486, -0.09]],
        style: { color: 'red', weight: 5 }
      },
      polygon: {
        latlngs: [
          [51.509, -0.08],
          [51.503, -0.06],
          [51.51, -0.047],
          [51.52, -0.056]
        ],
        style: { color: 'red', weight: 1 }
      },
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],

      menuItems: ['菜单1', '菜单2', '菜单3', '-', '菜单4']
    }
  },
  beforeDestroy() {
    this.$refs.map.mapObject.remove()
  },
  components: {
    LMap,
    LTileLayer,
    LMarker,
    LCircle,
    LTooltip,
    LPopup,
    LPolyline,
    LRectangle,
    LPolygon,
    MapContextmenu
  },
  methods: {
    lineClick(){
      this.polyline.style.color = 'red'
    },
    zoomUpdated(zoom) {
      this.zoom = zoom
    },
    centerUpdated(center) {
      this.center = center
    },
    boundsUpdated(bounds) {
      this.bounds = bounds
    },
    menuClick(e, item, index) {
      console.log('menuClick=' + e + ',' + item + ',' + index)
      this.$message(
        '你点击了' + item + ',位置=' + e.latlng.lat + ',' + e.latlng.lng
      )
    }
  }
}
</script>

<style>
.my-div-icon{
            font-size:20px;
            /*background:red;*/
            /*width:5px;*/
            color:red;
        }
</style>
